<template>
	<view class="wrap">
		<block v-if="dataBuffer">
			<view class="top">
				<image :src="activeData.img" mode="widthFix" class="topBanner"></image>
				<image src="../../static/active.png" mode="widthFix" class="bottomBanner"></image>
			</view>
			<u-waterfall v-model="flowList" ref="uWaterfall">
				<template v-slot:left="{leftList}">
					<view class="demo-warter" v-for="(item, index) in leftList" :key="item.id">
						<!-- 警告：微信小程序中需要hx2.8.11版本才支持在template中结合其他组件，比如下方的lazy-load组件 -->
						<!-- <u-lazy-load threshold="-450" border-radius="10" :image="item.image" :index="index"></u-lazy-load> -->
						<u-lazy-load threshold="-450" border-radius="10" :image="item.img" :index="index"></u-lazy-load>
						<view class="demo-title">
							{{item.goodsname}}
						</view>
						<view class="demo-price">
							{{item.price}}元
						</view>
						<view class="demo-tag">
							<view class="demo-tag-owner">
								自营
							</view>
							<view class="demo-tag-text">
								放心购
							</view>
						</view>
						<view class="demo-shop">
							小u商城
						</view>
						<u-icon name="close-circle-fill" color="#fa3534" size="34" class="u-close" @click="remove(item.id)"></u-icon>
					</view>
				</template>
				<template v-slot:right="{rightList}">
					<view class="demo-warter" v-for="(item, index) in rightList" :key="index">
						<!-- <u-lazy-load threshold="-450" border-radius="10" :image="item.image" :index="index"></u-lazy-load> -->
						<u-lazy-load threshold="-450" border-radius="10" :image="item.img" :index="index"></u-lazy-load>
						<view class="demo-title">
							{{item.goodsname}}
						</view>
						<view class="demo-price">
							{{item.price}}元
						</view>
						<view class="demo-tag">
							<view class="demo-tag-owner">
								自营
							</view>
							<view class="demo-tag-text">
								放心购
							</view>
						</view>
						<view class="demo-shop">
							小u商城
						</view>
						<u-icon name="close-circle-fill" color="#fa3534" size="34" class="u-close" @click="remove(item.id)"></u-icon>
					</view>
				</template>
			</u-waterfall>
			<u-loadmore 
				bg-color="rgb(240, 240, 240)" 
				:status="loadStatus" 
				@loadmore="addRandomData"
			></u-loadmore>
		</block>
		<!-- 无数据提示 -->
		<u-empty 
			text="暂无数据~~去逛逛~~" 
			mode="list" 
			:show="!dataBuffer" 
			color="orange" 
			icon-color="orange"
		></u-empty>
	</view>
</template>

<script>
	// 引入测试数据 可以测试使用
	// import list from '@/utils/active.data.js'
	export default {
		data() {
			return {
				activeData:{},//商品活动数据
				loadStatus: 'loadmore',//loadmore  loading nomore
				flowList: [],//商品活动列表数据
				page:1,//页码
				size:4,//每次查询条数
				totalPage:0,//总页码数
				dataBuffer:true
			}
		},
		onLoad(option){
			// 获取活动数据
			this.activeData = JSON.parse(option.activeData)
			// 动态设置导航栏标题内容
			uni.setNavigationBarTitle({title:this.activeData.title})
			// 根据二级商品分类id获取商品活动数据
			this.getList();
			
			// 瀑布流原理 奇偶数拆分
			// let score = [1,2,3,4,5,6,7,8]
			// let left = [];//左侧列表
			// let right = [];//右侧列表
			// for(let i=0; i<score.length;i++){
			// 	if(score[i]%2 == 0){
			// 		left.push(score[i])
			// 	}else{
			// 		right.push(score[i])
			// 	}
			// }
			// console.log(score)
			// console.log(left,right)
		},
		
		// 设置监听页面触底的函数
		onReachBottom(){
			//实现上拉加载
				// 原理：分页思想  ++page  新旧数据拼接concat()  边界判断（totalPage）
				if(this.page < this.totalPage){
					//提示数据加载中
					this.loadStatus = "loading";
					// 开始请求数据
					setTimeout(()=>{
						++this.page;
						this.getList();
					},1000)
				}else{
					// 提示没有更多了
					this.loadStatus = "nomore"
				}
		},
	
		methods: {
			// 获取活动列表数据
			getList(){
				this.$http({
					url:"getgoodlist",
					data:{
						cateid:this.activeData.second_cateid,
						type:2,
						page:this.page,
						size:this.size,
					}
				})
				.then(res=>{
					console.log(this.page)
					// 解构获取活动数据和总页码
					let {totalPage,goodData} = res.list
					// 检测是否有数据展示
					if(goodData == null){
						this.dataBuffer = false
					}else{
						this.dataBuffer = true
						// 检测支持上拉加载
						if(totalPage == 1){
							// 如果就一页数据说明没有更多了
							this.loadStatus = "nomore"
						}else{
							// 如果有更多数据
							this.loadStatus = "loadmore"
						}
						// 处理商品的图片路径
						goodData.forEach(item=>item.img = this.$URL+item.img)
						// 将数据赋值给页面 注意新旧数据拼接 concat
						this.flowList = this.flowList.concat(goodData);
						// 赋值总页码数
						this.totalPage = totalPage;
					}
				})
				.catch(err=>console.log(err))
			},
			remove(id) {
				this.$refs.uWaterfall.remove(id);
			},
			clear() {
				this.$refs.uWaterfall.clear();
			}
		}
	}
</script>

<style lang="scss" scoped>
	// 引入样式
	@import '@/static/css/active.scss'
</style>
